import { Component } from 'react';
import { Link, } from 'react-router-dom';
import { getcoupon } from '../request/app';
import img from '../assent/img/角标.png';
import img2 from '../assent/img/说明.png';

import '../assent/less/discount.css';
class Discount extends Component {
    constructor() {
        super()
        this.state = {
            countlist: [],
            navlist: [
                {
                    id: 1,
                    navname: '未使用'
                },
                {
                    id: 2,
                    navname: '已使用'
                },
                {
                    id: 3,
                    navname: '已失效'
                },
            ],
            //配合选项卡
            active: 0
        }
    }
    render() {
        return (
            <div>
                <div className='discount'>
                    {/*------- 头部----- */}
                    <header className='header'>
                        <div className='top'>
                            <Link to={{
                                pathname: '/home'
                            }} className='li'>
                                <span className="iconfont icon-fanhui"></span>
                            </Link>
                            <p>优惠券</p>

                        </div>
                        {/* -----选项卡标题---- */}
                        <div className="nav">
                            <div className="ft">
                                <ul>
                                    {
                                        this.state.navlist.map((item, index) => {
                                            return (
                                                <li key={item.id} className={index == this.state.active ? 'active' : ''} onClick={this.countlist.bind(this, index)}> {item.navname}</li>
                                            )
                                        })
                                    }
                                </ul>
                            </div>
                        </div>
                    </header>
                    {/* ------优惠券----- */}
                    <div className='count'>
                        <ul>
                            {
                                this.state.countlist.map(item => {
                                    return (
                                        <li key={item.id}>
                                            <div>
                                                <div className='count_price'>
                                                    <p>￥<span>{item.money}</span></p>
                                                    <span>满{item.limit_money}可用</span>
                                                </div>
                                                <div className='count_title'>
                                                    <h3>{item.title}</h3>
                                                    <p className='time'>2021.01.25至2021.01.2</p>
                                                </div>
                                                <div className='count_cont'>
                                                    <p>使用规则：{item.description}</p>
                                                    <span className="iconfont icon-31xiala"></span>
                                                </div>
                                                <img src={img} alt="" />
                                            </div>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                        <img src={img2} alt="" className='shuoming' />
                    </div>
                </div>
            </div>
        );
    }
    countlist(index) {
        this.setState({
            active: index
        })
    }
    componentDidMount() {
        //发送请求
        getcoupon({

        }).then(res => {
            if (res.code != 200) {
                alert(res.msg)
                return
            }
            this.setState({
                countlist: res.list[0].content
            })
            // console.log(res);
        })
    }
}
export default Discount